<template>
<!-- 简单导航 -->	
<SimpleNav />
<section class="login-form">
	<!-- 定义一个容器、水平垂直居中 -->
	<main class="login-container">
		<div class="login-bg">
			 <el-switch
			    v-model="switchType"
			    class="ml-2"
			    inline-prompt
				size="large"
			    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
			    active-text="登录"
			    inactive-text="注册"
			  />
		</div>
		<div class="login-core">
			<div class="login-tab" @click="swtichTab">
				<span data-name="0" :class="{active: !is_staff}">普通用户</span>
				<span data-name="1" :class="{active: is_staff}">企业用户</span>
			</div>
			<!-- 显示登录组件 -->
			<div class="login-panel">
				<el-form :model="login" label-width="auto" v-show="switchType">
				   <el-form-item  v-show="!is_staff">
				     <el-input v-model="login.email" size="large" placeholder="请输入邮箱账号">
						<template #suffix>
							<el-icon :size="26"><Message /></el-icon>
						</template>
					 </el-input>
				   </el-form-item>
				   
				   <el-form-item  v-show="is_staff">
				     <el-input v-model="login.tel" size="large" placeholder="请输入手机账号">
						<template #suffix>
							<el-icon :size="26"><PhoneFilled /></el-icon>
						</template>
					 </el-input>
				   </el-form-item>
				   
				   <el-form-item>
				     <el-input v-model="login.password" type="password" size="large" placeholder="请输入密码">
						 <template #suffix>
						 	<el-icon :size="26"><Unlock /></el-icon>
						 </template>
					 </el-input>
				   </el-form-item>
				   <el-form-item>
						<el-checkbox v-model="login.rememberMe" size="large">30天自动登录</el-checkbox>
				   </el-form-item>
				   <el-form-item>
				     <el-button type="primary" size="large" style="width: 100%;" @click="onSubmitLogin">登录</el-button>
				   </el-form-item>
				   <a class="login-fda" @click="findPass">忘记密码，点我找回</a>
				 </el-form>
				 
				 <el-form :model="form" label-width="auto"  v-show="!switchType">
				    <el-form-item  v-show="!is_staff">
				      <el-input v-model="form.email" size="large" placeholder="请输入邮箱账号">
						<template #suffix>
							<el-icon :size="26"><Message /></el-icon>
						</template>
					 </el-input>
				    </el-form-item>
				    
				    <el-form-item  v-show="is_staff">
				      <el-input v-model="form.tel" size="large" placeholder="请输入手机账号">
						<template #suffix>
							<el-icon :size="26"><PhoneFilled /></el-icon>
						</template>
					 </el-input>
				    </el-form-item>
				    <el-form-item>
				      <el-input v-model="form.password" type="password" size="large" placeholder="请输入密码">
				 		 <template #suffix>
				 		 	<el-icon :size="26"><Unlock /></el-icon>
				 		 </template>
				 	 </el-input>
				    </el-form-item>
					
					<el-form-item>
					  <el-input v-model="form.password2" type="password" size="large" placeholder="请再次输入密码">
						 <template #suffix>
						 	<el-icon :size="26"><Unlock /></el-icon>
						 </template>
					 </el-input>
					</el-form-item>
					
					<el-form-item>
					  <el-input v-model="form.name" size="large" placeholder="请输入真实姓名">
						 <template #suffix>
						 	<el-icon :size="26"><User /></el-icon>
						 </template>
					 </el-input>
					</el-form-item>
					
					<el-form-item  v-show="!is_staff">
					   <el-select v-model="form.region" size="large" clearable placeholder="请选择班级">
						  <el-option label="python2402" value="1" />
						  <el-option label="python2405" value="2" />
						</el-select>
					</el-form-item>
					
				    <el-form-item>
				       <el-button type="primary" size="large" style="width: 100%;" @click="onSubmitRegister">注册</el-button>
				    </el-form-item>
				  </el-form>
			</div>
			
		</div>
	</main>
</section>
</template>
<script>
  import SimpleNav from '@/components/SimpleNav.vue'	
	
  export default {
    data() {
      return {
		is_staff: true, // 控制 普通用户 / 企业用户
        switchType: true, // 控制登录或注册
		login: {
			email: '',
			password: '',
			tel: "" , 
			rememberMe: true ,
		},
		form: {
			email: "",
			tel: "",
			password: "",
			password2: "",
			name: "",
			clazz: null ,
		}
      };
    },
    methods: {
       swtichTab(event) {
		   if (event.target.nodeName === "SPAN") {
			   this.is_staff = event.target.dataset.name === "1";
		   }
	   },
	   onSubmitLogin() {
		   // 实现用户登录
	   },
	   onSubmitRegister() {
		   // 使用用户注册
	   },
	   findPass() {
		   this.$router.push({name: 'find-pwd', query: {is_staff: this.is_staff ? btoa('enterprise') : btoa('normal') }})
	   }
    },
	components: {
		SimpleNav ,
	}
  };
</script>

<style scoped>
	

.login-form {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
}	

.login-container {
	width: 900px;
	height: 560px;
	background-color: #f0f0f0;
	display: flex;
	border-radius: 20px 0 0 20px;
}
.login-bg {
	position: relative;
	width: 300px;
	background: #333 url(../assets/task-login-bg.png) no-repeat center / 230%;
	border-radius: 20px 0 0 20px;
	box-shadow: 0 0 10px #000;
}

.login-core {
	flex: auto 1 1;
}

.login-tab {
	height: 120px;
	line-height: 120px;
	text-align: center;
	font-size: 18px;
}

.login-tab span {
	padding: 10px 30px;
	cursor: pointer;
	position: relative;
	margin: 0 5px;
}

.login-tab span::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
}

.login-tab span.active::after {
	height: 4px;
	width: 100%;
	background-color: #5FB878;
	transition: all .5s ;
}

.login-panel {
	padding: 30px 40px;
}

.login-fda {
	float: right !important;
	font-size: 14px;
}

.el-switch {
	position: absolute;
	right: -22px;
	top: 10px;
}
</style>